<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>H5静态页面</title>
	</head>
	<style>
		*{margin:0px;padding:0px;}
		li{
			list-style:none;
		}
		:root{
			background:rgb(200,200,200);
		}
		.box{
			width:900px;
			height:600px;
			margin:0px auto;
			border:5px solid white;
		}
		.header{
			height:100px;
			color:white;
			text-align:center;
			background:orangered;
			font:100px/100px "微软雅黑";
		}
		.main{
			height:400px;
			background:gray;
		}
		nav{
			width:200px;
			padding:10px;
			float:left;
		}
		nav h2{
			height:50px;
			font:30px/50px "微软雅黑";
			font-weight:700px;
			color:white;
			text-align:center;
		}
		nav li{
			height:40px;
			font:16px/40px "微软雅黑";
			color:orangered;
			border-bottom:5px solid white;
			padding-left:10px;
		}
	</style>
	<body>
		<div class="box">
			<div>
				<header class="header">header</header>
			</div>	
			<div class ="main">
				<nav>
					<h2>nav</h2>
					<li>link1</li>
					<li>link2</li>
					<li>link3</li>
				</nav>
			</div>
		</div>	
	</body>
</html>
